<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>${param.title}</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- Font Awesome 本地备份 -->
    <link rel="stylesheet" href="css/all.min.css">
    <link rel="stylesheet" href="css/fontawesome.min.css">
    <link rel="stylesheet" href="css/solid.min.css">
    <!-- 自定义CSS -->
    <link rel="stylesheet" href="css/style.css">
    <!-- jQuery -->
    <script src="js/jquery.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <header>
        <!-- 顶部导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
            <div class="container-fluid justify-content-end">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="register.jsp">注册</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="login.jsp">登录</a>
                    </li>
<%--                    <li class="nav-item">--%>
<%--                        <a class="nav-link" href="#">信息管理</a>--%>
<%--                    </li>--%>
<%--                    <li class="nav-item">--%>
<%--                        <a class="nav-link" href="#">编写新闻</a>--%>
<%--                    </li>--%>
                </ul>
            </div>
        </nav>

        <!-- 网站标志和搜索框 -->
        <div class="container-fluid py-3">
            <div class="row align-items-center">
                <div class="col-auto">
                    <a href="index.jsp" class="text-decoration-none">
                        <div class="d-flex align-items-center">
                            <img src="images/logo.png" alt="天天新闻网" height="50">
                            <h1 class="ms-2 mb-0 text-danger">天天新闻网</h1>
                        </div>
                    </a>
                </div>
                <div class="col">
                    <div class="d-flex justify-content-end">
                        <div class="input-group" style="max-width: 320px;">
                            <form action="search" method="get" class="d-flex w-100">
                                <input type="text" name="keyword" class="form-control" placeholder="搜索新闻..." 
                                       value="${keyword}" required>
                                <button class="btn btn-danger" type="submit" style="width: 8rem">
                                    <i class="fas fa-search"></i> 搜索
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-danger" style="background-color: #cc1919 !important;">
            <div class="container">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse justify-content-between" id="mainNav">
                    <ul class="navbar-nav w-100 justify-content-between">
                        <li class="nav-item">
                            <a class="nav-link ${currentPage == 'index' ? 'active' : ''}" href="index">首页</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link ${currentPage == 'international' ? 'active' : ''}" href="international">国内资讯</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link ${currentPage == 'internationalNews' ? 'active' : ''}" href="internationalNews">国际要闻</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">财经专题</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">视频资讯</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">民生动态</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">科技前沿</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">文娱大事</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <!-- 消息提示框 -->
    <c:if test="${not empty sessionScope.message}">
        <div class="message-popup" id="messagePopup">
            <div class="message-content">
                ${sessionScope.message}
            </div>
        </div>
        <% session.removeAttribute("message"); %>
        <script>
            // 显示消息提示
            window.onload = function() {
                var popup = document.getElementById('messagePopup');
                popup.style.display = 'block';
                
                // 3秒后自动消失
                setTimeout(function() {
                    popup.style.opacity = '0';
                    setTimeout(function() {
                        popup.style.display = 'none';
                    }, 500);
                }, 3000);
            };
        </script>
    </c:if>
